<template>
  <layout title="input输入框">
    <layout-content title="基础使用">
      <view class="tn-flex-center-start">
        <view class="tn-col-4">普通文本框:</view>
        <view class="tn-flex-1"><tn-input v-model="inputValue" placeholder="请输入内容"></tn-input></view>
      </view>
      <view class="tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-4">文本域:</view>
        <view class="tn-flex-1"><tn-input v-model="textareaValue" type="textarea" placeholder="请输入内容"></tn-input></view>
      </view>
      <view class="tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-4">密码:</view>
        <view class="tn-flex-1"><tn-input v-model="passwordValue" type="password" placeholder="请输入密码"></tn-input></view>
      </view>
    </layout-content>

    <layout-content title="select">
      <view class="tn-flex-center-start">
        <view class="tn-col-4">配合选项:</view>
        <view class="tn-flex-1"><tn-input v-model="selectValue" type="select" :select-open="showSelect" placeholder="请选择内容" @click="selectInputClick"></tn-input></view>
      </view>
    </layout-content>

    <layout-content title="配合自定义键盘">
      <view :id="numberRectId" class="tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-4">数字不带小数:</view>
        <view class="tn-flex-1"><tn-input v-model="numberValue" type="number" custom-keyboard placeholder="请输入内容" @click="numberInputClick"></tn-input></view>
      </view>
      <view :id="decimalRectId" class="tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-4">数字带小数:</view>
        <view class="tn-flex-1"><tn-input v-model="decimalValue" type="digit" custom-keyboard placeholder="请输入内容" @click="decimalInputClick"></tn-input></view>
      </view>
      <view :id="idcardRectId" class="tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-4">身份证:</view>
        <view class="tn-flex-1"><tn-input v-model="idcardValue" type="idcard" custom-keyboard placeholder="请输入内容" @click="idcardInputClick"></tn-input></view>
      </view>
    </layout-content>

    <layout-content title="自动聚焦">
      <view class="tn-flex-center-start">
        <view class="tn-col-4">自动聚焦:</view>
        <view class="tn-flex-1"><tn-input v-model="autoFocusValue" focus placeholder="请输入内容"></tn-input></view>
      </view>
    </layout-content>

    <layout-content title="修改键盘完成文字">
      <tn-input v-model="inputValue" confirm-type="next" placeholder="请输入内容"></tn-input>
    </layout-content>

    <layout-content title="显示边框">
      <tn-input v-model="inputValue" border placeholder="请输入内容"></tn-input>
    </layout-content>

    <layout-content title="隐藏清空按钮">
      <tn-input v-model="inputValue" :clearable="false" placeholder="请输入内容"></tn-input>
    </layout-content>

    <layout-content title="设置右图标">
      <tn-input v-model="searchValue" placeholder="请输入需要搜索的内容" input-align="center" right-icon="search"></tn-input>
    </layout-content>

    <layout-content title="自定义样式">
      <tn-input v-model="inputValue" placeholder="请输入内容" input-align="center" :custom-style="customInputStyle" :placeholder-style="customPlaceholderStyle"></tn-input>
    </layout-content>
  </layout>

  <!-- 数字键盘 -->
  <tn-keyboard
    v-model="keyboardValue"
    v-model:show="showKeyboard"
    :mode="keyboardMode"
    :dot="keyboardDot"
    @confirm="handleKeyboardConfirm"
  ></tn-keyboard>

  <!-- select -->
  <tn-select
    v-model="showSelect"
    :data="selectData"
    @confirm="handleSelectConfirm"
  ></tn-select>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref, watch, getCurrentInstance, ComponentInternalInstance } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import { onPageScroll } from '@dcloudio/uni-app'

import useSystemInfo from '@/tuniao-ui/libs/hooks/useSystemInfo'
import { getRectInfo, uuid } from '@/tuniao-ui/utils'

import TnInput from '@/tuniao-ui/components/tn-input/src/Input.vue'
import TnKeyboard from '@/tuniao-ui/components/tn-keyboard/src/Keyboard.vue'
import TnSelect from '@/tuniao-ui/components/tn-select/src/Select.vue'
import { KeyboardMode } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

let inputValue = ref<string>('')
let textareaValue = ref<string>('')
let passwordValue = ref<string>('')
let selectValue = ref<string>('')
let numberValue = ref<string>('')
let decimalValue = ref<string>('')
let idcardValue = ref<string>('')
let autoFocusValue = ref<string>('')
let searchValue = ref<string>('')

// 键盘相关参数
let keyboardMode = ref<KeyboardMode>('number')
let keyboardDot = ref<boolean>(false)
let showKeyboard = ref<boolean>(false)
let keyboardValue = ref<string>('')
watch(() => keyboardValue.value, (val: string) => {
  if (keyboardMode.value === 'number' && !keyboardDot.value) {
    numberValue.value = val
  } else if (keyboardMode.value === 'number' && keyboardDot.value) {
    decimalValue.value = val
  } else if (keyboardMode.value === 'card') {
    idcardValue.value = val
  }
})
const handleKeyboardConfirm = () => {
  showKeyboard.value = false
}

// select相关参数
let showSelect = ref<boolean>(false)
const selectData: {label: string, value: number}[] = [
  { label: 'V1.0.0', value: 0 },
  { label: 'V2.0.0', value: 1 },
  { label: 'V3.0.0', value: 2 }
]
const handleSelectConfirm = (value: any) => {
  selectValue.value = selectData[value].label
}

// 配合自定义键盘操作
const instance = getCurrentInstance() as ComponentInternalInstance
const { systemInfo, customNavbar, updateSystemInfo } = useSystemInfo()
updateSystemInfo()
const numberRectId: string = uuid()
const decimalRectId: string = uuid()
const idcardRectId: string = uuid()
let pageScrollTop: number = 0
const numberInputClick = async () => {
  await scrollToCustomKeyboardBottom(numberRectId)
  keyboardValue.value = numberValue.value
  keyboardMode.value = 'number'
  keyboardDot.value = false
  showKeyboard.value = true
}
const decimalInputClick = async () => {
  await scrollToCustomKeyboardBottom(decimalRectId)
  keyboardValue.value = decimalValue.value
  keyboardMode.value = 'number'
  keyboardDot.value = true
  showKeyboard.value = true
}
const idcardInputClick = async () => {
  await scrollToCustomKeyboardBottom(idcardRectId)
  keyboardValue.value = idcardValue.value
  keyboardMode.value = 'card'
  showKeyboard.value = true
}
const scrollToCustomKeyboardBottom = async (rectId: string) => {
  const rect = await getRectInfo(`#${rectId}`, instance)
  const distance = 220 - (systemInfo.value.screenHeight - (rect?.bottom || 0) - customNavbar.value.height)
  if (distance > 0) {
    uni.pageScrollTo({
      scrollTop: pageScrollTop + distance + 10,
      duration: 50
    })
  }
}

onPageScroll((e) => {
  pageScrollTop = e.scrollTop
})

// 配合select操作
const selectInputClick = () => {
  showSelect.value = true
}

// 自定义input样式
const customInputStyle: CSSProperties = {
  border: '1rpx solid #E6E6E6',
  borderRadius: '100rpx',
  fontSize: '36rpx',
  color: '#01BEFF'
}
const customPlaceholderStyle: string = 'color: #01BEFF55'
</script>

<style lang="scss" scoped>
</style>
